<template>
	<view style="padding-bottom: 40rpx;">
		<view class="title" :style="{borderTopLeftRadius: borderRadius,borderTopRightRadius: borderRadius}">
			<!-- <view class="left-arrow" @click="lastMonth()">
				<image src="./static/left@2x.png" style="width: 20rpx; height: 30rpx"></image>
			</view> -->
			<view class="year" style="margin: 0 auto 30rpx;">
				<text>{{ year }}年{{ month + 1 }}月</text>
			</view>
			<!-- <view class="right-arrow" @click="nextMonth()">
				<image src="./static/right@2x.png" style="width: 20rpx; height: 30rpx"></image>
			</view> -->
		</view>
		<!-- <view v-if="open" class="week">
			<view class="day" v-for="(item, index) in weekList" :key="index">{{ item }}</view>
		</view> -->
		<view class="container">
			<view class="inside">
				<view class="every-day" v-for="(item, index) in list" :key="index">
					<view class="every-day-box" :class="{ active: item.is_sign==1 }" @click="selectDay(item)">
						<slot :data="item">
							<view>
								<text v-if="item.is_sign==2">{{index+1 }}</text>
								<image src="../../static/qiandao.png" mode="" v-else style="width: 50rpx;height: 50rpx;"> </image>
							</view>
						</slot>
					</view>
					<view class="every-day-short-date">
						{{ item.date_time}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
/**
 * @property {String} week week展现形式, 可选值:z-zh("周x") | x-zh("星期x") | abb-en("Mon")
 * @property {String} borderRadius 日历外框圆角
 * @property {String} errorText 不能选择未来日期的提示语,默认为"不能选择未来日期"
 * @property {Array} list 外部传入的奖项
 * @property {Boolean} isOpen 是否以"周"形式展示
 * @property {Boolean} isFuture 是否允许选择未来日期,默认允许
 * @event {Function} switchMonth 切换月份事件,参数为切换的年月字符串,格式:'2024-03'
 * @event {Function} click 选择日期事件,参数为所选日期字符串及日期对象,日期字符串如:'2024-3-1'
 */
export default {
	name: 'mmdt-calendar',
	props: {
		week: {
			type: String,
			default: 'x-zh'
		},
		borderRadius: {
			type: String,
			default: '16rpx'
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		isOpen: {
			type: Boolean,
			default: true
		},
		isFuture: {
			type: Boolean,
			default: true
		},
		errorText: {
			type: String,
			default: '不能选择未来日期'
		}
	},
	data() {
		return {
			year: new Date().getFullYear(),
			month: new Date().getMonth(),
			dates: [],
			positionTop: 0,
			open: true
		};
	},
	computed: {
		
	},
	
	methods: {
		
		selectDay(item) {
			if (item.flag) {
				return;
			} else {
				this.$emit('click',  item);
			}
		},
		
		
		
	}
};
</script>

<style lang="scss" scoped>
.title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 0 24rpx;
	box-sizing: border-box;

	.year {
		font-size: 28rpx;
		color: #000000;
	}
}

.week {
	width: 100%;
	display: flex;
	align-items: center;
	line-height: 90rpx;
	background: #fff;

	.day {
		flex: 1;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9a9a9a;
	}
}

.container {
	width: 100%;
	transition: height 0.4s ease;
	overflow: hidden;
	background: #fff;

	.inside {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		transition: top 0.3s;
		padding: 0 20rpx;
		.every-day {
			width:118rpx;
			height: auto;
			.every-day-box {
				width: 94rpx;
				height: 94rpx;
				font-size: 28rpx;
				background: #f0ebe8;
				border-radius: 12rpx;
				border: 2rpx solid #eee;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;margin: 0 auto;
				// overflow: hidden;
			}

			.not {
				opacity: 0.6;
			}

			.active {
				background: #fc603a;color: #fff;
			}

			.every-day-short-date {
				line-height: 40rpx;
				font-size: 20rpx;
				padding-bottom: 18rpx;text-align: center;
			}
		}
	}
}

.hide {
	// height: 152rpx !important;
	height: 148rpx !important;
}

.line-container {
	width: 100%;
	background: #fff;

	.line {
		height: 2rpx;
		background: #dedede;
	}
}

.show {
	width: 100%;
	height: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;

	.turn {
		transform: rotate(90deg);
	}

	.active {
		transform: rotate(-90deg);
	}
}
</style>
